<template>
  <div class="alarm-wrap" v-if="alarmShow">
    <el-form label-width="120px" v-model="detail">
      <el-row class="alarm-detail">
        <el-col :span="24">
          <common-group-title
            title="告警详情"
            class="alarm-title"
          ></common-group-title>
        </el-col>
        <el-col :span="24" style="height: 6px"></el-col>
        <el-row>
          <el-col :span="8">
            <el-form-item label="系统标识：" prop="systemCode">
              {{ detail.systemCode }}</el-form-item
            >
          </el-col>
          <el-col :span="8">
            <el-form-item label="规则名称：" prop="ruleName">
              {{ detail.ruleName }}
            </el-form-item>
          </el-col>
          <!-- <el-col :span="8">
            <el-form-item label="告警子类型：" prop="alarmBusiness">
              {{ detail.alarmBusiness }}</el-form-item
            >
          </el-col> -->
          <el-col :span="8">
            <el-form-item label="告警码：" prop="alarmCode">
              {{ detail.alarmCode }}</el-form-item
            >
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="告警类型：" prop="alarmTypeName">
              {{ detail.alarmTypeName }}</el-form-item
            >
          </el-col>
          <el-col :span="8">
            <el-form-item label="告警等级：" prop="alarmLevel">
              {{
                detail.alarmLevel === 0
                  ? "低级"
                  : detail.alarmLevel === 1
                  ? "中级"
                  : "高级"
              }}</el-form-item
            >
          </el-col>
          <el-col :span="8">
            <el-form-item label="告警累计次数：" prop="accumulateTotal">
              {{ detail.accumulateTotal }} 次</el-form-item
            >
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="8">
            <el-form-item label="告警时间：" prop="alarmTime">
              {{ parseTime(new Date(detail.alarmTime)) }}</el-form-item
            >
          </el-col>
          <el-col :span="8">
            <el-form-item label="源IP：" prop="sourceIp">
              {{ detail.sourceIp }}</el-form-item
            >
          </el-col>
          <el-col :span="8">
            <el-form-item label="目标IP：" prop="targetIp">
              {{ detail.targetIp }}</el-form-item
            >
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="状态：" prop="status">
              {{ detail.status | alarmStatusFilter }}</el-form-item
            >
          </el-col>
          <el-col
            :span="8"
            v-if="
              detail.alarmCode && detail.alarmCode.substr(0, 6) === '0X0003'
            "
          >
            <el-form-item label="是否误报：" prop="falseAlarmStatus">
              {{ detail.falseAlarmStatus === 1 ? "是" : "否" }}</el-form-item
            >
          </el-col>
          <el-col :span="8">
            <el-form-item label="组织：" prop="deptName">
              {{ detail.deptName }}</el-form-item
            >
          </el-col>
        </el-row>
        <el-col
          :span="24"
          style="border-top: 1px #eee solid; padding-right: 14px"
        >
          <el-form-item label="告警描述：" prop="alarmContent">
            {{ detail.alarmContent }}</el-form-item
          >
        </el-col>
      </el-row>
    </el-form>
    <div class="button-wrap">
      <el-button
        type="primary"
        class="handle-button"
        @click="handleAlarm"
        v-if="detail.status === 0"
        >处理</el-button
      >
      <el-button
        type="primary"
        class="handle-button"
        v-if="detail.status === 1"
        disabled
        >处理中</el-button
      >
      <el-button
        type="primary"
        class="handle-button"
        v-if="detail.status === 2"
        disabled
        >已处理</el-button
      >
      <el-button
        type="primary"
        class="handle-button"
        v-if="detail.status === 3"
        disabled
        >已关闭</el-button
      >
    </div>
  </div>
</template>
<script>
import { fetchAlarmInfo, updateAlarmStatus } from "@/api/system/alarmCode";
import { thirdGansuLogin } from "@/api/login";
import { setTokenEncrypt } from "@/utils/auth";
import { treeselectOfSystem } from "@/api/system/dept";
import { getSingleArray, getFullDept } from "@/utils/util";

export default {
  data() {
    return {
      detail: {},
      auditId: "",
      singleDeptList: [],
      alarmShow: false,
    };
  },
  mounted() {
    let params = this.$route.query;
    if (params.auditId && params.sessionToken) {
      this.auditId = params.auditId;
      this.getAuthentication(params.auditId, params.sessionToken);
    } else {
      this.$router.push("/403");
    }
  },
  methods: {
    getAuthentication(auditId, sessionToken) {
      thirdGansuLogin({ sessionToken: sessionToken })
        .then((res) => {
          if (res && res.code === 200) {
            this.alarmShow = true;
            setTokenEncrypt(res.data.token);
            this.getTreeselectOfSystem();
            this.getDetail(auditId, res.data.token);
          } else {
            this.$router.push("/403");
          }
        })
        .catch(() => {
          this.$router.push("/403");
        });
    },

    getDetail(auditId, token) {
      fetchAlarmInfo({ auditId: auditId, sessionToken: token }).then((res) => {
        if (res && res.code === 200) {
          this.detail = res.rows[0];
          this.detail.deptName = this.detail.deptId
            ? this.getDeptName(this.detail.deptId)
            : "";
        }
      });
    },

    getTreeselectOfSystem() {
      treeselectOfSystem().then((res) => {
        if (res && res.code === 200) {
          this.singleDeptList = getSingleArray(res.data || []);
        }
      });
    },

    getDeptName(val) {
      let dept = this.singleDeptList.find((item) => item.id === val.toString());
      if (dept) return getFullDept(dept.fulllabel);
    },

    handleAlarm() {
      updateAlarmStatus({ alarmIds: this.auditId, status: 2 }).then((res) => {
        if (res && res.code === 200) {
          this.detail.status = 2;
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.alarm-wrap {
  width: 100%;
}
.alarm-detail {
  border: 1px #dcdfe6 solid;
  margin: 0 auto;
  margin-top: 25px;
  width: 90%;
  ::v-deep .el-form-item--small.el-form-item {
    margin-bottom: 6px;
    margin-top: 6px;
  }
}
.alarm-title {
  background: #f5f7fa;
  padding: 0 10px;
}
.button-wrap {
  width: 100%;
  text-align: center;
  margin-top: 10px;
  .handle-button {
    width: 80px;
  }
}
</style>
